<template>
	<view>
		<view v-if="istabFixed" style="top:135rpx;background-color: #FFFFFF;" :class="{'fixed-top':istabFixed}" class="flex align-center text-center py-2">
			<view @click="changeTab(index)" class="flex-1" v-for="(item,index) in tabBars" :key="index">
				<view :class="index===tabIndex ? 'font-lg font-weight-bold text-main':'font-md'">{{item.name}}</view>
			</view>
		</view>
		<topic-info :detail="detail"></topic-info>
		<divider></divider>
		<view
		v-for="(item,index) in hotList" 
		:key="index" 
		class="p-2 flex align-center border-bottom" 
		hover-class="bg-light">
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">
				{{item.title}}
			</text>
		</view>
		<divider id="divider"></divider>
		<view class="flex align-center text-center py-2">
			<view @click="changeTab(index)" class="flex-1" v-for="(item,index) in tabBars" :key="index">
				<view :class="index===tabIndex ? 'font-lg font-weight-bold text-main':'font-md'">{{item.name}}</view>
			</view>
		</view>
		<view v-if="Object.keys(list).length !== 0">
			<template v-if="list[tabIndex].list.length > 0">
				<!-- 列表 -->
				<block v-for="(item,index) in list[tabIndex].list" :key="index">
					<common-list @doSupport="doSupport" @Follow="Follow" :item="item" :index="index"></common-list>
				</block>
			</template>
			<template v-else>
				<no-thing></no-thing>
			</template>
			<!-- 上拉加载 -->
			<load-more :loadmore="list[tabIndex].loadtext"></load-more>
		</view>
		
	</view>
</template>

<script>
	import topicInfo from "@/components/topic-detail/topic-info";
	import commonList from "@/components/common/common-list";
	import NoThing from "@/components/common/no-thing";
	import loadMore from "@/components/common/load-more";
	import {getTopicDetail} from "@/network/topic.js";
	import {getFavorRecord,getFollowAdd} from "@/network/follow.js";
		
	export default {
		components:{
			topicInfo,
			commonList,
			NoThing,
			loadMore
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// console.log(e.scrollTop)
			this.monitor[this.tabIndex].scroll = e.scrollTop
			this.istabFixed = e.scrollTop > this.scrollH
		},
		// 触底事件
		onReachBottom(){
			this.loadmore()
		},
		data() {
			return {
				istabFixed:false,
				tabIndex:0,
				scrollH:0,
				monitor:[],
				tabBars:[{
					name:"默认"
				},{
					name:"最新"
				}],
				detail:{},
				record:[0],
				hotList:[{
					title:"【新人必读】 uni-app实战第三季仿微信类开发"
				},{
					title:"【新人必读】 uni-app实战第二季商城类开发快来啊，哈哈哈哈哈，呵呵呵呵"
				}],
				list:[]
			}
		},
		// 页面卸载时调用
		onUnload() {
			uni.$off('updateFollowOrSupport',(e)=>{})
			uni.$off('Logout',(e=>{}))
		},
		onLoad(e){
			this.detail = JSON.parse(e.detail)
			if(this.detail){
				

				getTopicDetail(this.detail.id).then(attr=>{
					let [err,res] = attr
					this.getDate(res.data)
					// 监听关注和顶踩
					
				})
				uni.$on("updateFollowOrSupport",(e)=>{
					switch (e.type){
						case "follow":
						this.Follow(e.data.user_id)
							break;
						case "support":
						this.doSupport(e.data.news_list)
							break;
						case "comment":
						this.doComment(e.data.comment)
							break;	
					}
				})
				uni.$on("Logout",()=>{
					getTopicDetail(this.detail.id).then(attr=>{
						let [err,res] = attr
						this.getDate(res.data)
						// 监听关注和顶踩
						
					})
					this.record = [0]
				})
			}
			
			this.$nextTick(function(){
				  //获取其他组件也是这个道理
				 let query = uni.createSelectorQuery().select('#divider');
				 query.boundingClientRect(data=> {
						this.scrollH = data.top-59
				   }).exec()
			  })
			
		},
		methods:{
			changeTab(index){
				uni.pageScrollTo({
				    scrollTop: this.monitor[index].scroll,
				    duration: 0
				});
				if(this.record.indexOf(index)<=-1){
					getTopicDetail(this.detail.id,'true').then(attr=>{
						let [err,res] = attr
						if(err){
							uni.showToast({title:"请求失败"})
						}else{
							let item = this.list[index]
							let result = res.data
							item.list=result.results
							item.mid = item.list.slice(-1)[0]?.id
							item.loadtext = result.loadmore
							this.record.push(index)
						}
					})
				}
				this.tabIndex = index
			},
			getDate(data){
				var data_list = {}
				for(let i=0;i<this.tabBars.length;i++){
					data_list[i]={
						loadtext:"上拉加载更多",
						mid:null,
						list:[]
					}
					this.monitor[i]={scroll:0}
					
				}
				let result = data.results
				data_list[0].list = result
				data_list[0].mid = result.slice(-1)[0]?.id
				data_list[0].loadtext = data.loadmore
				this.list = data_list
			},
				
			// 上拉加载更多
			loadmore(){
				let index = this.tabIndex
				let data_list = this.list[index]
				if(data_list.loadtext !=="上拉加载更多") return
				// 修改列表状态
				data_list.loadtext = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					let sid=this.detail.id
					let bool = index ? 'true' : null
					let mid = data_list.mid
					getTopicDetail(sid,bool,mid).then(attr=>{
						let [err,res] = attr
						if(err){
							uni.showToast({title:"请求失败"})
						}else{
							data_list.list = [...data_list.list,...res.data.results]
							data_list.loadtext = res.data.loadmore
							data_list.mid = res.data.results.slice(-1)[0]?.id
						}
					})
				},2000)
					
			},
			// 关注功能
			Follow(user_id){
				
				Object.values(this.list).forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.user==user_id){
								item.isFollow = !item.isFollow
							}
						})
					}
					return
				})
				
				
			},
			// 评论
			doComment(e){
				Object.values(this.list).forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.id==e.id){
								item.comment_count = e.count
							}
						})
					}
					return
				})
			},
			// 顶踩功能
			doSupport(news_list){
					let types = news_list.type
					let msg = types==="support" ? "点赞" : "点踩"
					Object.values(this.list).forEach(tab=>{
						if(tab.list.length>0){
							tab.list.forEach(item=>{
								if(item.id==news_list.id){
									// 如果已点过则进行取消操作
									if(item.news_list.type===types){
										item.news_list[types+"_count"]--
										item.news_list.type=""
										uni.showToast({title:"取消成功"})
										return
									}
									// 如果没点过取消，且没选中任何功能，则执行
									if(item.news_list.type){
										let my_type = item.news_list.type
										item.news_list[my_type+"_count"]--
									}
									// 如果什么都没选执行
									item.news_list.type=types
									item.news_list[types+"_count"]++
									uni.showToast({title:msg+"成功"})
								}
							})
						}
						return
					})
			},
			
		}	
		
	}
</script>

<style>
	.filter{
		filter: blur(10px);
	}
</style>
